<template>
	<view class="content">
		<view class="header" :style="{'margin-top':tops+'px'}">
			<view class="back" @click="goBack">
				<image src="../../static/9.png"></image>
			</view>
			<view class="name">添加高级资料</view>
			<view class="history" @click="history">历史记录</view>
		</view>

		<view class="formCon">
			<view class="li_2" @click="pickerClick('custom_leibie')">
				<view class="text">客户来源点击输入/右侧下拉选择</view>
				<image class="icon" src="../../static/2.png"></image>
			</view>

			<view class="li_3">
				<view class="child">
					<view class="lable">介绍人姓名</view>
					<input type="text" v-model="formData.jieshaorenxingming" placeholder="介绍人姓名" />
				</view>
				<view class="child">
					<view class="lable">我与介绍人关系</view>
					<input type="text" placeholder="点击输入/下拉选择" />
					<picker class="picker-box" mode="selector" :range="array" range-key="name"
						@change="bindPickerChange" :value="value">
						<view class="picker">
							<image class="icon" src="../../static/2.png"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="li_3">
				<view class="child" style="width: 48%;">
					<view class="lable">客户与介绍人关系</view>
					<input type="text" placeholder="点击输入/下拉选择" />
					<picker class="picker-box" mode="selector" :range="array" range-key="name"
						@change="bindPickerChange" :value="value">
						<view class="picker">
							<image class="icon" src="../../static/2.png"></image>
						</view>
					</picker>
				</view>
				<input style="margin-top: 35rpx;" v-model="formData.kehushenfenzhenghao" type="text"
					placeholder="客户身份证号码(必填)" />
			</view>
			<view class="li">
				<input type="text" v-model="formData.hangyenianxian" placeholder="行业年限" />
				<input type="text" v-model="formData.cengjinghangye" placeholder="曾经行业" />
			</view>
			<view class="li_3" style="display: fl;">
				<view class="child"
					style="width: 46.8%;border:1rpx solid #ccc;border-radius: 10rpx;margin-right: 40rpx;">
					<picker style="width: 100%;" class="picker-box" mode="selector" :range="hunyinList" range-key="name"
						@change="hunyinPickerChange" :value="value">
						<view class="picker" style="width: 100%;margin-left: 20rpx;margin-top: 20rpx;">
							<view>{{ !formData.hunyinzhuangkuang ? '婚姻状况' : formData.hunyinzhuangkuang}}</view>
							<image class="icon" style="top: 20rpx;" src="../../static/2.png"></image>
						</view>
					</picker>
				</view>
				<view class="child" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
					<input type="text" v-model="formData.jiguan" style="width: 60%;border: 0;" placeholder="籍贯" />
					<!-- <image class="icon" style="top: 20rpx;" src="../../static/2.png" @click="open"></image> -->
				</view>
			</view>
			<view class="li">
				<input type="text" v-model="formData.zinvnianling" placeholder="子女年龄" />
				<input type="text" v-model="formData.zinvshulianghexingbie" placeholder="子女数量和性别" />
			</view>

			<view class="li_2" @click="pickerClick('custom_leibie')">
				<view class="text">健康狀況点击输入/选择</view>
				<image class="icon" src="../../static/2.png"></image>
			</view>
			<view class="li_2" @click="pickerClick('custom_leibie')">
				<view class="text">爱好点击输入/选择</view>
				<image class="icon" src="../../static/2.png"></image>
			</view>
			<view class="li_3">
				<view class="child" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
					<input type="text" v-model="formData.congyeyuanyin" style="width: 60%;border: 0;"
						placeholder="从业原因" />
					<!-- <view class="picker-box" style="width: 70rpx;height: 70rpx;" >
						<view class="picker">
							<image class="icon" style="top: 20rpx;" src="../../static/2.png"></image>
						</view>
					</view> -->
				</view>
				<view class="child" style="border:1rpx solid #ccc;border-radius: 10rpx;">
					<input type="text" v-model="formData.yonghuoshijian" style="width: 60%;border: 0;"
						placeholder="用货时间" />

				</view>
			</view>
			<view class="li">
				<input type="text" v-model="formData.hehuorneshuliang" placeholder="合伙人数量" />
				<input type="text" v-model="formData.tuanduirenshu" placeholder="团队人数" />
			</view>
			<view class="li">
				<input type="text" v-model="formData.huowuyongtu" placeholder="货物用途" />
				<input type="text" v-model="formData.gonghuoqudao" placeholder="供货渠道" />
				<!-- <picker class="picker-box" mode="selector" :range="array" range-key="name" @change="bindPickerChange"
					:value="value">
					<view class="picker">
						<view v-if="sexIndex < 0" style="color: #999;">货物用途</view>
						<view v-else>{{ array[sexIndex].name }}</view>
						<image class="icon" src="../../static/2.png"></image>
					</view>
					</picker>
				<picker class="picker-box" mode="selector" :range="array" range-key="name" @change="bindPickerChange"
					:value="value">
					<view class="picker">
						<view v-if="sexIndex < 0" style="color: #999;">供货渠道</view>
						<view v-else>{{ array[sexIndex].name }}</view>
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker> -->
			</view>
			<view class="li_1">
				<textarea v-model="formData.koushuzichanqingkuang"
					style="width: 100%;border: 1rpx solid #ccc;padding: 20rpx;font-size: 26rpx;"
					placeholder="口述资产状况"></textarea>
			</view>
			<view class="li_1">
				<textarea v-model="formData.shijizichanqingkuang"
					style="width: 100%;border: 1rpx solid #ccc;padding: 20rpx;font-size: 26rpx;"
					placeholder="实际资产状况"></textarea>
			</view>
			<view class="li_title">
				<span>其他人物关系</span>
				<image class="icon" @click="addQitarenwuguanxi" src="../../static/6.png"></image>
			</view>
			<view class="li" style="display: block;height: 160rpx;" v-for="(item,index) in formData.qitarenwuguanxi">
				<view style="display: flex;">
					<input type="text" v-model="item.xingming" placeholder="姓名" />
					<input type="text" v-model="item.dianhua" placeholder="电话" />
					<input type="text" v-model="item.guanxi" placeholder="与客户关系" />
				</view>
				<input style="width: 96%;" v-model="item.zhuzhi" type="text" placeholder="家庭住址" />
			</view>
			<!-- <view class="li_1">
				<input type="text" placeholder="定位导航" />
				<image @click="getMapLocation" class="icon" src="../../static/7.png"></image>
			</view>
			<view class="li_2">
				<input type="text" placeholder="客户类别点击输入/右侧下拉选择" />
				<picker class="picker-box" mode="selector" :range="array" range-key="name" @change="bindPickerChange"
					:value="region">
					<view class="picker">
						<image class="icon" src="../../static/2.png"></image>
					</view>
				</picker>
			</view> -->



		</view>

		<button class="save-btn" @click="saveFormData">保存</button>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
			@cancel="cancel" :visible="visible" />

		<!-- 选择弹窗 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="picker-box-pop">
				<view class="title">
					<view @click="closepopup">取消</view>
					<view>这是标题</view>
					<view @click="saveChecked">确认</view>
				</view>
				<view class="search-box">
					<uni-search-bar class="uni-mt-10" v-model="save_input_text" radius="5" placeholder="请输入名称"
						clearButton="auto" cancelButton="none" />
					<view class="save_input" @click="save_input">保存</view>
				</view>
				<view class="check-list uni-px-5 uni-pb-5">
					<uni-data-checkbox mode="tag" multiple v-model="checkboxValue"
						:localdata="hobby"></uni-data-checkbox>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		getaddress,
		uploadImage,
		put_kehu,
		list_kehu
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [{
						text: '客户资料'
					},
					{
						text: '附件'
					}
				],
				hunyinActive: 0,
				hunyinList: [{
						name: '已婚',
						value: 0
					},
					{
						name: '未婚',
						value: 1
					}
				],
				sexIndex: -1,
				tops: 0,
				height: 0,

				// 地区选择
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,

				// 弹窗选择的类型
				picker_type: '',
				// 弹窗选择的值
				checkboxValue: [],
				// 客户类别
				custom_leibie: '',
				custom_leibie_text: '',
				hobby: [],

				// 提交表单
				formData: {
					kehulaiyuan: 1,
					jieshaorenxingming: "",
					woyujieshaorenguanxi: 1,
					kehuyujieshaorenguanxi: 1,
					kehushenfenzhenghao: "",
					hangyenianxian: "",
					cengjinghangye: "",
					hunyinzhuangkuang: "",
					jiguan: "",
					zinvnianling: "",
					zinvshulianghexingbie: "",
					jiankanzhuangkuang: 1,
					aihao: 1,
					congyeyuanyin: "",
					yonghuoshijian: "",
					hehuorneshuliang: "",
					tuanduirenshu: "",
					huowuyongtu: "",
					gonghuoqudao: "",
					koushuzichanqingkuang: "",
					shijizichanqingkuang: "",
					qitarenwuguanxi: [{
						xingming: '',
						tel: '',
						guanxi: '',
						zhuzhi: ''
					}],
				},
				kehu_id: ''
			}
		},
		components: {
			cityPicker
		},
		onLoad(options) {
			this.kehu_id = options.kehu_id
			if (this.kehu_id) {
				this.getIinfo()
			}
			uni.getSystemInfo({
				success: (e) => {

					this.tops = e.statusBarHeight;

					let custom = uni.getMenuButtonBoundingClientRect();

					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;

				}

			})

		},
		methods: {
			
			async getIinfo(){
				let that = this
				let data = {
					user_id:uni.getStorageSync('userInfo').user_id,
					kehu_id:that.kehu_id
				}
				let res = await list_kehu(data,that.kehu_id);
				

				if(res.results.qitarenwuguanxi.length == 0){
					res.results.qitarenwuguanxi.push({
						xingming: '',
						tel: '',
						guanxi: '',
						zhuzhi: ''
					})
				}
		
				that.formData = res.results
				
				console.log('客户信息',that.formData)
			},

			// 打开多选弹框
			pickerClick(type) {
				this.picker_type = type
				this.$refs.popup.open('bottom')
			},

			// 多选弹窗确认选择值
			saveChecked() {
				console.log('弹窗选择的值', this.checkboxValue)
				console.log(666, this.save_input_text)
				const foundItems = this.hobby.filter(item => this.checkboxValue.includes(item.value));
				console.log(777, foundItems)
				if (this.picker_type == 'custom_leibie') {
					this.custom_leibie = this.checkboxValue
					this.custom_leibie_text = foundItems.map(item => item.text).join(', ');
					this.$refs.popup.close()
				}
			},

			// 关闭多选弹框
			closepopup() {
				this.$refs.popup.close()
			},

			// 保存多选弹框输入值
			save_input() {

				if (this.save_input_text) {
					this.hobby.push({
						text: this.save_input_text,
						value: 18
					})
					this.save_input_text = ''
				}

			},

			async saveFormData() {
				let that = this
				that.formData.koushuyonghuozhonglei = JSON.stringify(that.formData.koushuyonghuozhonglei)
				that.formData.shijiyonghuozhonglei = JSON.stringify(that.formData.shijiyonghuozhonglei)
				that.formData.dangkou_img_list= JSON.stringify(that.formData.dangkou_img_list)
				that.formData.fangchanzheng_img_list= JSON.stringify(that.formData.fangchanzheng_img_list)
				that.formData.qitarenwuguanxi= JSON.stringify(that.formData.qitarenwuguanxi)
				that.formData.qiti_img_list= JSON.stringify(that.formData.qiti_img_list)
				that.formData.shenfenzheng_img_list= JSON.stringify(that.formData.shenfenzheng_img_list)
				that.formData.xingshizheng_img_list= JSON.stringify(that.formData.xingshizheng_img_list)
				let res = await put_kehu(that.formData, that.kehu_id)
				console.log('修改状态', res)
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						//icon: 'none',
						duration: 2000
					});
					uni.navigateBack()
				}
			},

			open() {
				this.visible = true
				console.log(666, this.visible)
			},
			confirm(val) {
				console.log(val)
				this.str = JSON.stringify(val)
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			goBack() {
				uni.navigateBack()
			},
			tabChange(index) {
				this.tabActive = index
			},
			history() {
				uni.navigateTo({
					url: '/pages/seniorDataHistory/index'
				})
			},

			hunyinPickerChange(e) {
				console.log(this.hunyinList[e.detail.value])
				this.hunyinActive = e.detail.value
				this.formData.hunyinzhuangkuang = this.hunyinList[e.detail.value].name
			},

			addQitarenwuguanxi() {
				this.formData.qitarenwuguanxi.push({
					xingming: '',
					tel: '',
					guanxi: '',
					zhuzhi: ''
				})
			},

			getMapLocation() {
				let that = this
				uni.chooseLocation({
					success: (res) => {
						// 将获取到的地址信息存储
						this.address = res.address
						console.log(666, res)
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	// 将获取到的地址信息存储
																	this.address =
																		res
																		.address
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

		}
	}
</script>

<style scoped>
	.picker-box-pop {
		padding-bottom: 100rpx;
		font-size: 28rpx;
	}

	.picker-box-pop .search-box {
		width: 95%;
		height: 80rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.picker-box-pop .search-box .uni-mt-10 {
		width: 80%;
	}

	.picker-box-pop .search-box .save_input {
		width: 18%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 2%;
		background-color: #008BDE;
		color: white;
	}

	.picker-box-pop .title {
		width: 95%;
		height: 70rpx;
		line-height: 70rpx;
		margin: auto;
		margin-top: 12rpx;
		display: flex;
		justify-content: space-between;
	}

	.picker-box-pop .title view:nth-child(1) {
		color: #999;
	}

	.picker-box-pop .title view:nth-child(3) {
		color: #008BDE;
	}

	.picker-box-pop .check-list {
		width: 88%;
		margin: auto;
		margin-top: 20rpx;
	}

	.header {
		width: 100%;
		height: 100rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		text-align: center;
		background-color: white;
		z-index: 100;
	}

	.header .back {
		height: 100%;
		width: 40rpx;
		margin-left: 30rpx;
		float: left;
		display: flex;
		align-items: center;
	}
	.header .back image{
		width: 20rpx;
		height: 40rpx;
		
	}

	.header .name {
		height: 100%;
		line-height: 90rpx;
		margin-top: 7rpx;
	}

	.header .history {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		position: absolute;
		right: 50rpx;
		top: 22rpx;
		color: white;
		background-color: #008BDE;
	}

	/*#ifdef MP-WEIXIN*/
	.header .name {
		width: 35%;
		line-height: 90rpx;
		margin-right: 50rpx;
		float: left;
	}

	.header .history {
		float: left;
		position: initial;
		color: white;
		background-color: #008BDE;
		margin-top: 20rpx;
	}

	/*#endif*/
	.tabList {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #008BDE;
		margin: auto;
		margin-top: 130rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}

	.formCon {
		width: 90%;
		margin: auto;
		margin-top: 120rpx;
		padding-bottom: 280rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
	}

	.formCon .li {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.formCon .li input {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li .picker-box {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		position: relative;
	}

	.formCon .li .picker-box view {
		margin-top: 22rpx;
	}

	.formCon .li .picker-box image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
	}

	.formCon .li_1 {
		display: flex;
		margin-top: 20rpx;
	}

	.formCon .li_1 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li_1 image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 14rpx;
	}

	.formCon .li_2 {
		display: flex;
		margin-top: 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
	}

	.formCon .li_2 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 .text {
		width: 86%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 image {
		width: 45rpx;
		height: 45rpx;
		margin-right: 20rpx;
		margin-top: 17rpx;
	}

	.formCon .li_3 {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.formCon .li_3 .child {
		position: relative;
	}

	.formCon .li_3 .picker-box {
		position: absolute;
		right: 10rpx;
		top: 0;
	}

	.formCon .li_3 .child image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 15rpx;
		top: 60rpx;

	}

	.formCon .li_3 .child:nth-of-type(1) {
		margin-right: 40rpx;
	}

	.formCon .li_3 input {
		font-size: 28rpx;
		height: 80rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		padding-left: 10rpx;
	}

	.li_title {
		width: 100%;
		height: 60rpx;
		margin-top: 40rpx;
		display: flex;
	}

	.li_title image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
	}

	.addOther {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #008BDE;
		color: white;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.addOther view {
		margin-left: 50rpx;
	}

	.addOther image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 13rpx;
		margin-right: 50rpx;
	}

	.imgList {
		margin-top: 20rpx;
	}

	/deep/ .icon-add {
		width: 50rpx;
	}

	.save-btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		position: fixed;
		bottom: 8%;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
</style>